import { AfterViewInit, Component, ElementRef, Input,Output,EventEmitter, OnInit} from '@angular/core';
import {ContentChildren,QueryList } from '@angular/core';
import { TabComponent } from '../tab/tab.component';

@Component({
  selector: 'nova-tab-group',
  templateUrl: './tab-group.component.html',
  styleUrls: ['./tab-group.component.scss']
})
export class TabGroupComponent implements AfterViewInit{
  /**
   * <nova-tab-group [index]="1">
   * 获取父组件传递过来的 index 的值
   */
  @Input() index!:number
  /**
   * indexChange 声明一个事件对象，来接收父组件传递的事件
   */
  @Output() indexChange:EventEmitter<number> = new EventEmitter();
 /**  
  * ContentChild与ContentChildren是获取投影中的组件、指令及元素DOM等；
    ContentChildren开启descendants才能获得所有子组件。

  *  查询 TabComponent 组件里的指令
  */
  @ContentChildren(TabComponent) tabComps!: QueryList<TabComponent>

  /**
   * 实现切换组件时，关闭其他组件效果
   * @param label 被打开的组件标签名称
   */
  tabOnToggle(label:string){
    console.log(label)
    this.tabComps.forEach((tab)=>{

      if(label != tab.label){
        // 关闭
        tab.close()
      }else{
        tab.open()
      }
    })
  }

  ngAfterViewInit(): void {
    console.log(this.tabComps)
    this.subscribeChildrenEvent()
    
  }
  /**
   * 通过订阅子组件事件，实现参数传递
   * 避免value checked后改变参数的错误信息
   * 相当于：<nova-tab (onToggle)="tabOnToggle"></nova-tab>
   */
  subscribeChildrenEvent(){
    this.tabComps.forEach((tab)=>{
      tab.onToggle.subscribe(label=>{
        this.tabOnToggle(label)
      })
    })
  }

}
